import React from "react";
import { Space, Input, Select, Table, Tag } from "antd";
import type { ColumnsType } from "antd/es/table";
import { Stepper, Cell, Toast } from "react-vant";
import { useNavigate } from "react-router-dom";
import { useDispatch, useSelector } from "react-redux";
type Props = {};

const NewTrainNumber = (props: Props) => {
  const dispatch = useDispatch();
  const nav = useNavigate();
  interface DataType {
    key: string;
    seat: string;
    carriage: number;
    row: number;
    seatNum: number;
    limit: number;
    Noseat: number | string;
  }

  const columns: ColumnsType<DataType> = [
    {
      title: "席位类别",
      dataIndex: "seat",
      key: "seat",
      render: (text: any) => <a>{text}</a>,
      align: "center",
    },
    {
      title: "车厢数",
      dataIndex: "carriage",
      key: "carriage",
      align: "center",
      render: (text: any) => (
        <Stepper
          onOverlimit={() => console.log("overlimit")}
          onMinus={() => console.log("minus")}
          onPlus={() => console.log("plus")}
          onChange={(v) => console.log(v)}
          value={text}
        />
      ),
    },
    {
      title: "每车排数",
      dataIndex: "row",
      key: "row",
      align: "center",
      render: (text: any) => (
        <Stepper onChange={(v) => console.log(v)} min={text} value={text} />
      ),
    },
    {
      title: "每车席位",
      dataIndex: "seatNum",
      key: "seatNum",
      align: "center",
    },
    {
      title: "每车限乘人数",
      dataIndex: "limit",
      key: "limit",
      align: "center",
      render: (text: any) => (
        <Stepper onChange={(v) => console.log(v)} min={text} />
      ),
    },
    {
      title: "每车无座数",
      dataIndex: "Noseat",
      key: "Noseat",
      align: "center",
    },
  ];

  const data: DataType[] = [
    {
      key: "1",
      seat: "商务座",
      carriage: 1, //车厢数
      row: 17,
      seatNum: 22,
      limit: 17,
      Noseat: 10,
    },
    {
      key: "1",
      seat: "一等座",
      carriage: 1, //车厢数
      row: 17,
      seatNum: 22,
      limit: 17,
      Noseat: "-",
    },
    {
      key: "1",
      seat: "二等座",
      carriage: 2, //车厢数
      row: 17,
      seatNum: 22,
      limit: 17,
      Noseat: "-",
    },
    {
      key: "1",
      seat: "软卧",
      carriage: 1, //车厢数
      row: 17,
      seatNum: 22,
      limit: 17,
      Noseat: 4,
    },
    {
      key: "1",
      seat: "硬卧",
      carriage: 1, //车厢数
      row: 17,
      seatNum: 22,
      limit: 17,
      Noseat: "-",
    },
    {
      key: "1",
      seat: "硬座",
      carriage: 2, //车厢数
      row: 17,
      seatNum: 22,
      limit: 17,
      Noseat: 10,
    },
  ];
  // 下拉
  const handleChange = (value: string) => {
    console.log(`selected ${value}`);
  };
  const submit = () => {
    let newarr = {
      key: Math.random(),
      trainType: 889,
      username: "11",
      seatNumber: 586,
      carriageNum: 10,
      Ridelimit: 646,
      createTime: "1972-07-21",
      state: true,
    };
    dispatch({
      type: "ADD-TRAINDATA",
      payload: newarr,
    });
    nav("/index/trainNumber");
  };
  return (
    <div>
      <div className="submit">
        <p>新建车次</p>
        <div className="btn">
          <button className="btn1" onClick={() => nav("/index/trainNumber")}>
            返回
          </button>
          <button onClick={() => submit()}>提交</button>
        </div>
      </div>
      <h3>基本信息</h3>
      <div className="action">
        <div>
          车次类型：
          <Select
            placeholder="全部"
            style={{ width: 120 }}
            onChange={handleChange}
            options={[
              { value: "G654", label: "G654" },
              { value: "G626", label: "G626" },
              { value: "G324", label: "G324" },
            ]}
          />
        </div>
        <div style={{ display: "flex", alignItems: "center" }}>
          <span style={{ width: 80 }}>车次：</span>
          <Input placeholder="请输入车次" />
        </div>
        <div style={{ display: "flex", alignItems: "center" }}>
          <span style={{ width: 80 }}>车长：</span>
          <Input placeholder="请输入姓名" />
        </div>
      </div>
      <div className="trainInformation">
        <p>
          <span>席位总数</span>586
        </p>
        <p>
          <span>车厢总数</span>8
        </p>
        <p>
          <span>限乘人数</span>646
        </p>
        <p>
          <span>无座总数</span>60
        </p>
      </div>
      <Table pagination={false} columns={columns} dataSource={data} />
    </div>
  );
};

export default NewTrainNumber;
